// 1. 导入 Redux 核心函数
import { configureStore, combineReducers } from '@reduxjs/toolkit'
import { ThunkAction, Action } from '@reduxjs/toolkit'
import counterReducer from '@/store/counterSlice.ts'
import colorReducer from '@/store/colorSlice.ts'
import storage from 'redux-persist/lib/storage'
import { persistReducer, persistStore } from 'redux-persist'

// 持久化数据的配置选项
const persistConfig = {
  key: 'root',
  storage
}

// 把多个 reducer 合并到一起
const rootReducer = combineReducers({
  // 切片的数据模块名称: slice 导出的 reducer
  count: counterReducer,
  color: colorReducer
})

// 2. 创建 store
const store = configureStore({
  // 下面这种写法，能够正确推导出 store 中数据的类型
  // reducer: rootReducer,
  // reducer 用来描述如何变更 store 中的数据
  // 但是使用了 persistReducer 之后，就无法正确推导出 store 中数据的类型
  reducer: persistReducer(persistConfig, rootReducer),
  middleware(getDefaultMiddleware) {
    return getDefaultMiddleware({
      serializableCheck: false
    })
  }
})

// 3. 向外导出 store
export default store
export const persistor = persistStore(store)

// 向外按需导出 store 所有数据的 TS 类型
// export type RootState = ReturnType<typeof store.getState>

// 由于用到了 persistReducer 中间件对 store 中的数据进持久化，
// 这就导致了无法正确推导出 store.getState 的类型。
// 因此，需要换一种方式，先通过“typeof rootReducer”获取 rootReducer 函数的类型，
// 再通过“ReturnType<typeof rootReducer>”获取函数的返回值类型，这样也能拿到 store 中数据的类型
export type RootState = ReturnType<typeof rootReducer>
export type AppThunk<RT = void> = ThunkAction<RT, RootState, unknown, Action<string>>
